<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>task2</title>
        <style type="text/css">
   .butt nobr{
       color:blue;
       border:4px;
       
   }
   .butt :hover{
       color:rgb(49, 245, 10);
   }
   .hr1 {
       height:1px;
       background-color:rgb(238, 222, 222);
   }
   #hr2 {
       width:30px;
       background-color: blue;
       position: absolute;
       margin-top: -11.5px;
       height:1px;
       z-index: 10000;
       transition: 0.5s;
   }
        </style>
    </head>
    <body >
        <div class="butt">
            <nobr id="tab1">Tab1</nobr>
            <nobr id="tab2">Tab2</nobr>
            <nobr id="tab3">Tab3</nobr>
        </div>
        <hr class="hr1">
        <hr id="hr2">
        <p id="text">the first tab</p>
       
        



<script type="text/javascript" src="EventUtil.js"></script>
<script type="text/javascript">
var tab1=document.getElementById("tab1");
var tab2=document.getElementById("tab2");
var tab3=document.getElementById("tab3");
var text=document.getElementById("text");
var hr2=document.getElementById("hr2");

tab1.onclick=function(){
    text.innerText="the first tab";
    hr2.style.left="5px";
}
tab2.onclick=function(){
    text.innerText="the second tab";
    hr2.style.left="50px";
}
tab3.onclick=function(){
    text.innerText="the third tab";
    hr2.style.left="95px";
}




    </script>
</body>
</html>